<template>
        <div class="login" style="height: 100vh;width:100%;display: flex;justify-content: center;align-items: center">
          <div style="width: 500px;height: 400px;border:1px solid #cfe3f1">
            <a-tabs v-model:activeKey="activeKey" tabBarGutter="130px" size="small" style="margin-left: 5px">
              <a-tab-pane key="1">
                <template #tab>
          <span>
            学生登录
          </span>
                </template>
                <a-form
                    :model="formState"
                    name="basic"
                    style="margin-left: 50px;height: 300px;width: 300px ;margin-top: 80px"
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                    autocomplete="off"
                    @finish="LoginUser"
                    @finishFailed="onFinishFailed"
                >
                  <a-form-item
                      label="用户名"
                      name="userNo"
                      :rules="[{ required: true, message: 'Please input your username!' }]"
                  >
                    <a-input v-model:value="formState.userNo" />
                  </a-form-item>

                  <a-form-item
                      label="密  码"
                      name="userPassword"
                      :rules="[{ required: true, message: 'Please input your password!' }]"
                  >
                    <a-input-password v-model:value="formState.userPassword" />
                  </a-form-item>


                  <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                    <a-button type="dashed" html-type="submit" style="margin-left: 70px">登录</a-button>
                  </a-form-item>
                </a-form>
              </a-tab-pane>
              <a-tab-pane key="2">
                <template #tab>
          <span>
            老师登录

          </span>
                </template>
                <a-form
                    :model="formState"
                    name="basic"
                    style="margin-left: 50px;height: 300px;width: 300px ;margin-top: 80px"
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                    autocomplete="off"
                    @finish="LoginUser"
                    @finishFailed="onFinishFailed"
                >
                  <a-form-item
                      label="用户名"
                      name="userNo"
                      :rules="[{ required: true, message: 'Please input your username!' }]"
                  >
                    <a-input v-model:value="formState.userNo" />
                  </a-form-item>

                  <a-form-item
                      label="密  码"
                      name="userPassword"
                      :rules="[{ required: true, message: 'Please input your password!' }]"
                  >
                    <a-input-password v-model:value="formState.userPassword" />
                  </a-form-item>


                  <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                    <a-button type="dashed" html-type="submit" style="margin-left: 70px">登录</a-button>
                  </a-form-item>
                </a-form>
              </a-tab-pane>
              <a-tab-pane key="3">
                <template #tab>
          <span>
  <!--          <android-outlined />-->
           管理员登录
          </span>
                </template>
                <a-form
                    :model="formState"
                    name="basic"
                    style="margin-left: 50px;height: 300px;width: 300px ;margin-top: 80px"
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                    autocomplete="off"
                    @finish="LoginUser"
                    @finishFailed="onFinishFailed"
                >
                  <a-form-item
                      label="用户名"
                      name="userNo"
                      :rules="[{ required: true, message: 'Please input your username!' }]"
                  >
                    <a-input v-model:value="formState.userNo" />
                  </a-form-item>

                  <a-form-item
                      label="密  码"
                      name="userPassword"
                      :rules="[{ required: true, message: 'Please input your password!' }]"
                  >
                    <a-input-password v-model:value="formState.userPassword" />
                  </a-form-item>

                  <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                    <a-button  type="dashed" html-type="submit" style="margin-left: 70px">登录</a-button>
                  </a-form-item>
                </a-form>
              </a-tab-pane>
            </a-tabs>

          </div>
        </div>
</template>

<script setup lang="ts">

import {useRouter} from "vue-router";
import {reactive, ref} from "vue";
import iamge from '../static/abc.jpg';
import myAxios from "../plugins/myAxios";
import {message} from "ant-design-vue";
const router = useRouter()
const visible = ref(true)


const activeKey= ref('1')
interface FormState {
  userNo: string;
  userPassword: string;
  // type: string;
  remember: boolean;
}
const formState = reactive<FormState>({

  userNo: '000003',
  userPassword: '123456',
  // type:'',
  remember: true,
});
const LoginUser= async () => {
  // formState.type = activeKey.value
  console.log(formState)
  const res = await myAxios.post("/user/login",{
    ...formState
  })
  if (res.code ===0){
    // console.log(1111)
    await getUser()
   await router.push({path: '/index'})
  }else {
    message.error(res.message)
  }
  // await router.push({path: '/index'})
}

const userInfo = ref()

const getUser = async () => {
  const user = await myAxios.get("/user/get/login")
  // if (user.data){
  //   userInfo.value =user.data
  // }else {
  //   await router.push({path: '/'})
  // }
}

</script>

<style scoped>
 .login{
   background: url("../static/abc.jpg") no-repeat ;
   background-size:cover;
 }
</style>
